{extend name="main"}
{block name="body"}
<el-tabs v-model="activeName" class="bg-white px-3">
    <el-tab-pane label="专题招聘" name="recruit"></el-tab-pane>
</el-tabs>
<div class="bg-white p-3">
    <el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px"
        :label-position="labelPosition">
        <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" class="col-12 col-sm-4 pl-0 pr-0" placeholder="专题名称"></el-input>
        </el-form-item>
        <el-form-item label="企业报名上限" prop="max_limit">
            <el-input v-model.number="form.max_limit" :min="1" class="col-12 col-sm-4 pl-0 pr-0" placeholder="报名企业数量上限">
                <template slot="append">个</template>
            </el-input>
        </el-form-item>
        <el-form-item label="企业会员级别" prop="vip_level">
            <el-checkbox-group size="small" v-model="form.vip_level">
                <el-checkbox-button v-for="vip in vipLevelList" :label="vip.value" :key="vip.value">{{vip.title}}
                </el-checkbox-button>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="是否启用">
            <el-radio-group v-model="form.status">
                <el-radio :label="true">启用</el-radio>
                <el-radio :label="false">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="允许企业报名">
            <el-radio-group v-model="form.enable_enroll">
                <el-radio :label="true">允许</el-radio>
                <el-radio :label="false">不允许</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="扣除积分点数">
            <el-input v-model.number="form.point_cost" class="col-12 col-sm-4 pl-0 pr-0" placeholder="报名扣除的积分">
                <template slot="append">点</template>
            </el-input>
        </el-form-item>
        <el-form-item label="报名截止时间" prop="end_time">
            <el-date-picker v-model="form.end_time" class="col-12 col-sm-4 pl-0 pr-0" type="datetime"
                value-format="timestamp" placeholder="选择日期时间" align="right" :picker-options="pickerOptions">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="排序权重">
            <el-input v-model.number="form.sort" class="col-12 col-sm-4 pl-0 pr-0" placeholder="默认为99">
            </el-input>
        </el-form-item>
        <el-form-item label="PC缩略图" prop="pc_thumb">
            <!-- rounded-circle -->
            <el-image v-if="form.pc_thumb" style="height: 160px;cursor: pointer;" :src="form.pc_thumb"
                :preview-src-list="[form.pc_thumb]">
            </el-image>
            <el-upload action="/uploadFiles" name="file" accept="image/*" :data="{path:'special_topic/pc_thumb'}"
                :show-file-list="false" :on-success="handlePcThumbSuccess" :on-error="handlePcThumbError">
                <el-button size="small" type="primary">选择文件</el-button>
            </el-upload>
            <p style="margin: 0;">推荐使用长宽比为347x120的图片</p>
        </el-form-item>
        <el-form-item label="PC背景图" prop="pc_bg">
            <el-image v-if="form.pc_bg" style="height: 160px;cursor: pointer;" :src="form.pc_bg"
                :preview-src-list="[form.pc_bg]">
            </el-image>
            <el-upload action="/uploadFiles" name="file" accept="image/*" :data="{path:'special_topic/pc_bg'}"
                :show-file-list="false" :on-success="handlePcBgSuccess" :on-error="handlePcBgError">
                <el-button size="small" type="primary">选择文件</el-button>
            </el-upload>
            <p style="margin: 0;">推荐使用长宽比为1280x303的图片</p>
        </el-form-item>
        <el-form-item label="移动端缩略图" prop="pc_thumb">
            <el-image v-if="form.mobile_thumb" style="height: 160px;cursor: pointer;" :src="form.mobile_thumb"
                :preview-src-list="[form.mobile_thumb]">
            </el-image>

            <el-upload action="/uploadFiles" name="file" accept="image/*" :data="{path:'special_topic/mobile_thumb'}"
                :show-file-list="false" :on-success="handleMobileThumbSuccess" :on-error="handlePcThumbError">
                <el-button size="small" type="primary">选择文件</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="移动端背景图" prop="mobile_thumb">
            <el-image v-if="form.mobile_bg" style="height: 160px;cursor: pointer;" :src="form.mobile_bg"
                :preview-src-list="[form.mobile_bg]">
            </el-image>
            <el-upload action="/uploadFiles" name="file" accept="image/*" :data="{path:'special_topic/mobile_bg'}"
                :show-file-list="false" :on-success="handleMobileBgSuccess" :on-error="handlePcBgError">
                <el-button size="small" type="primary">选择文件</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="专题介绍" prop="content">
            <el-input v-model="form.content" type="textarea" class="col-12 col-sm-4 pl-0 pr-0"
                :autosize="{ minRows: 3}"></el-input>
        </el-form-item>
        <el-form-item label="专题浏览基数" prop="base_view">
            <el-input v-model="form.base_view" class="col-12 col-sm-4 pl-0 pr-0" placeholder="默认为0"></el-input>
            <p style="margin: 0;">指前台页面显示浏览次数时从多少开始计算</p>
        </el-form-item>
        <el-form-item label="报名企业基数" prop="base_enroll">
            <el-input v-model="form.base_enroll" class="col-12 col-sm-4 pl-0 pr-0" placeholder="默认为0"></el-input>
            <p style="margin: 0;">指前台页面显示报名企业数时从多少开始计算</p>
        </el-form-item>
        <el-form-item class="setting-item">
            <div class="setting-item-body px-3">
                <el-button type="primary" :loading="loading" @click="submitForm('form')">保存</el-button>
            </div>
        </el-form-item>
    </el-form>
</div>
{/block}

{block name='script'}
{eq name='isEdit' value='true'}
<script>
    var form = JSON.parse('{:json_encode($form)}'.replace(/[\r\n\s+]/g, '\\n'));
</script>
{else/}
<script>
    var form = { title: "", max_limit: null, vip_level: [], status: true, enable_enroll: true, point_cost: 0, end_time: null, sort: 99, pc_thumb: "", pc_bg: "", mobile_thumb: "", mobile_bg: "", content: "" }
</script>
{/eq}
<script type="text/javascript">
    var vipLevelList = JSON.parse('{:json_encode($vipList)}'.replace(/[\r\n\s+]/g, '\\n'));
    var vm = new Vue({
        el: '#app',
        data: {
            view: XYBase.view,
            activeName: 'recruit',
            labelPosition: 'right',
            defaultProps: {
                value: 'id',
                label: 'title',
                children: 'data',
                checkStrictly: true
            },
            loading: false,
            vipLevelList: vipLevelList,
            pickerOptions: {
                shortcuts: [{
                    text: '明天这个时候',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '下周这个时候',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一个月后',
                    onClick(picker) {
                        const date = new Date();
                        date.setMonth(date.getMonth() + 1);
                        console.log(date);
                        picker.$emit('pick', date);
                    }
                }]
            },
            form: form,
            rules: {
                title: [
                    { required: true, message: '请输入专题名称', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                max_limit: [
                    { required: true, message: '请输入企业报名数量上限', trigger: 'blur' },
                    { type: 'number', message: '企业报名数量上限必须为数值' },
                ],
                vip_level: [
                    { required: true, type: 'array', message: '请至少选择一个会员等级', trigger: 'change' }
                ],
                end_time: [
                    { required: true, message: '截止时间不能为空', trigger: 'blur' },
                    { type: 'number', message: '截止时间格式不正确', trigger: 'blur' }
                ],
                pc_thumb: [
                    { required: true, message: '必须上传PC端缩略图', trigger: 'blur' }
                ],
                pc_bg: [
                    { required: true, message: '必须上传PC端背景图', trigger: 'blur' }
                ],
                mobile_thumb: [
                    { required: true, message: '必须上传移动端缩略图', trigger: 'blur' }
                ],
                pc_bg: [
                    { required: true, message: '必须上传移动端背景图', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '专题介绍不能为空', trigger: 'blur' }
                ]
            }
        },
        watch: {
            view: XYBase.viewWatch,
        },
        created() {
            XYBase.created(this);
            let vip_level = this.vipLevelList.map(item => {
                return item.value;
            })
            this.form.vip_level = [...vip_level];
        },
        methods: {
            handlePcThumbSuccess(res, file) {
                console.log(res, file);
                if (res) {
                    if (res.code != undefined && res.code == 0) {
                        this.form.pc_thumb = res.data.url;
                        XYBase.success('上传成功');
                    }
                } else {
                    XYBase.error('网络错误！');
                }
            },
            handlePcThumbError(err, file) {
                console.log(err, file);
            },
            handlePcBgSuccess(res, file) {
                console.log(res, file);
                if (res) {
                    if (res.code != undefined && res.code == 0) {
                        this.form.pc_bg = res.data.url;
                        XYBase.success('上传成功');
                    }
                } else {
                    XYBase.error('网络错误！');
                }
            },
            handlePcBgError(err, file) {
                console.log(err, file);
            },
            handleMobileThumbSuccess(res, file) {
                console.log(res);
                if (res) {
                    if (res.code != undefined && res.code == 0) {
                        this.form.mobile_thumb = res.data.url;
                        XYBase.success('上传成功');
                    }
                } else {
                    XYBase.error('网络错误！');
                }
            },
            handleMobileThumbError(err, file) {
                console.log(err, file);
            },
            handleMobileBgSuccess(res, file) {
                console.log(res, file);
                if (res) {
                    if (res.code != undefined && res.code == 0) {
                        this.form.mobile_bg = res.data.url;
                        XYBase.success('上传成功');
                    }
                } else {
                    XYBase.error('网络错误！');
                }
            },
            handleMobileBgError(err, file) {
                console.log(err, file);
            },
            handleTopImgSuccess(res, file) {
                console.log(res, file);
                if (res) {
                    if (res.code != undefined && res.code == 0) {
                        this.form.top_img = res.data.url;
                        XYBase.success('上传成功');
                    }
                } else {
                    XYBase.error('网络错误！');
                }
            },
            handleTopImgError(err, file) {
                console.log(err, file);
            },
            submitForm: function (formName) {
                var _this = this;
                var D = _this.form;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const loading = XYBase.openloading();
                        $.ajax({
                            url: '',
                            data: JSON.stringify(D),
                            type: 'POST',
                            contentType: 'application/json;charset=utf-8;',
                            dataType: 'json',
                            success: function (ret) {
                                loading.close();
                                console.log(ret);
                                if (ret) {
                                    if (ret.code == 0) {
                                        XYBase.success(ret.msg);
                                        if (!_this.is_edit) {
                                            _this.resetForm(formName);
                                        }
                                    } else {
                                        XYBase.msg(ret.msg);
                                    }
                                } else {
                                    XYBase.error(XYBase.config.system_network_error)
                                }
                            },
                            error: function (err) {
                                loading.close();
                                XYBase.error(XYBase.config.system_network_error)
                            }
                        });
                    } else {
                        XYBase.warning('请先把表单填写完整。');
                        return false;
                    }
                });
            },
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
        }
    });
</script>
{/block}